<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Swiper 样式文件 -->
    <link rel="stylesheet" href="css/swiper-6.1.2.min.css">
    <!-- 引入自定义样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部区域 -->
<div id="header"></div>
<!-- 主体区域 -->
<div class="main-content">
    <!-- Swiper 容器 -->
    <div class="swiper">
        <!-- Swiper 滑块包装器 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="" alt="" srcset="./img/index.png">
            </div>
            <div class="swiper-slide">
                <img src="" alt="" srcset="./img/index1.png">
            </div>
            <div class="swiper-slide">   <img src="" alt="" srcset="./img/index.png"></div>
        </div>
        <!-- Swiper 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- Swiper 导航按钮：上一页 -->
        <div class="swiper-button-prev"></div>
        <!-- Swiper 导航按钮：下一页 -->
        <div class="swiper-button-next"></div>
    </div>

    <!--产品介绍-->
    <div class="product">
        <div class="product_title">
            产品介绍
        </div>
        <div class="product_list">
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
            <div class="item">
                <div class="product_img">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="product_name">名称1</div>
            </div>
        </div>
    </div>

    <!--新闻中心-->
    <div class="news">
        <div class="product_title">
            新闻中心
        </div>
        <div class="news_list">
            <div class="news_item">
                <div  class="left">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="right">
                   <div class="content">
                       <div class="new_title yihang">这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题</div>
                       <div class="new_profile lianghang">这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介</div>
                   </div>
                    <div class="new_time">2025-02-17</div>
                </div>
            </div>
            <div class="news_item">
                <div  class="left">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="right">
                    <div class="content">
                        <div class="new_title yihang">这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题</div>
                        <div class="new_profile lianghang">这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介</div>
                    </div>
                    <div class="new_time">2025-02-17</div>
                </div>
            </div>
            <div class="news_item">
                <div  class="left">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="right">
                    <div class="content">
                        <div class="new_title yihang">这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题</div>
                        <div class="new_profile lianghang">这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介</div>
                    </div>
                    <div class="new_time">2025-02-17</div>
                </div>
            </div>
            <div class="news_item">
                <div  class="left">
                    <img src="./img/300.jpg" alt="">
                </div>
                <div class="right">
                    <div class="content">
                        <div class="new_title yihang">这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题这是新闻标题</div>
                        <div class="new_profile lianghang">这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介这是新闻简介</div>
                    </div>
                    <div class="new_time">2025-02-17</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer"></div>
<!-- 引入 jQuery 库 -->
<script src="js/jquery-3.7.1.js"></script>
<!-- 引入自定义 JavaScript 文件 -->
<script src="js/main.js"></script>
<!-- 引入 Swiper JavaScript 文件 -->
<script src="js/swiper-6.1.2.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化 Swiper
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式
            effect : 'fade', // 淡入淡出效果
            fadeEffect: {
                crossFade: true, // 交叉淡入淡出
            },
            pagination: {
                el: '.swiper-pagination', // 分页器元素
                clickable: true, // 允许点击分页器切换
            },
            navigation: {
                nextEl: '.swiper-button-next', // 下一页按钮元素
                prevEl: '.swiper-button-prev', // 上一页按钮元素
            },

        });
    });
</script>
</body>
</html>
